<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS: Simple SpriteSheet Example</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>

	<script src="../lib/easeljs-NEXT.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	var stage;
	function init() {

		// create a new stage and point it at our canvas:
		stage = new createjs.Stage(document.getElementById("testCanvas"));

		// Define a spritesheet. Note that this data was exported by Zoë.
		var spriteSheet = new createjs.SpriteSheet({
				framerate: 30,
				"images": ["../_assets/art/spritesheet_grant.png"],
				"frames": {"regX": 82, "height": 292, "count": 64, "regY": 0, "width": 165},
				// define two animations, run (loops, 1.5x speed) and jump (returns to run):
				"animations": {
					"run": [0, 25, "run", 1.5],
					"jump": [26, 63, "run"]
				}
			});

		// Events from SpriteSheet (not required for the demo)
		spriteSheet.on("complete", function(event) {
			console.log("Complete", event);
		});
		spriteSheet.on("error", function(event) {
			console.log("Error", event);
		});

		var grant = new createjs.Sprite(spriteSheet, "run");
		grant.x = stage.canvas.width / 2;
		grant.y = 22;

		// Add Grant to the stage, and add it as a listener to Ticker to get updates each frame.
		stage.addChild(grant);
		createjs.Ticker.timingMode = createjs.Ticker.RAF;
		createjs.Ticker.addEventListener("tick", stage);
	}

</script>
</head>

<body onload="init();">

<header class="EaselJS">
	<h1>Simple SpriteSheet Example</h1>

	<p>A simple example of defining a <code>SpriteSheet</code> and playing it
		back using <code>Sprite</code>.</p>
</header>

<div>
	<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>
